<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>       
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css">
    </head>
<body>

	<div class="container-fluid">

		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<section>
			<div class="container mb50">
												
				<g:render template="navigate"   model="[status: status]"/>
				
				
				<div class="right-content" id="rightconsole">  
				    <div style="border:#DBDBDB solid thin;padding:10px 10px">     
               		<header>
                             	<span style="font-size:20px">注意：</span>
                             	 <a class="floatr" href="javascript:if(confirm('确认要开启?')) location='/scfire/login/createMenu'"><div style="width:60px; background-color:#8EE5EE; padding:12px;font-size:16px;color:#fff">开启</div></a>
                             	 <a class="floatr" href="/scfire/manage/createMainMenu"><div style="width:110px; background-color:#8EE5EE; padding:15px;font-size:16px;color:#fff">添加主菜单</div></a>
                             	 <a class="floatr" href="/scfire/manage/createsubMenu"><div style="width:110px; background-color:#ddd; padding:15px;font-size:16px">添加子菜单</div></a>
									<p>1级菜单最多只能开启3个，2级菜单最多开启5个；</p>
									<p>只有保存主菜单后才可以添加子菜单；</p>  
									<p>当您添加完主菜单和子菜单之后，请点击“启用”按钮，正式启用</p>
								</header>
                    </div>
                 <div class="data-list-box">                        
                        <ul class="cdsp-table" id="submenu">
                            <li class="t-head">
                                <div class="col-2">显示顺序</div>
                                <div class="col-3">子菜单名称</div>
                                <div class="col-3">所属主菜单</div>
                                <div class="col-3">按钮类型</div>
                                <div class="col-6">触发关键词或链接地址</div>
                                <div class="col-3">操作</div>
                                <div class="clearboth"></div>
                            </li>
                            
          <g:each in="${subMenus}" var="${subMenu}" status="i">
            <li>
         
            <g:form id="form-editsub${i}" url="[resource:subeditInstance, controller:'manage', action:'editSubMenu']" method="post" class="form-horizontal">
              <div class="col-2">
              <input type="hidden"  value="${subMenu.id }"  name ="id"/>
              <input type="number" name="position" id="position${i }" class="form-control"  value="${subMenu.position }" min=0 readonly></div>
			  <div class="col-3"><input type="text" name="name" id="name${i }" value ="${subMenu.name }" class="form-control" readonly></div>
			  <div class="col-3">
				<select class="form-control"  onchange="Mainmenu(this,${i })" id="mainmenus${i }" disabled="disabled">
				  
				   <option value="${subMenu.mainM.name }" selected="selected">${subMenu.mainM.name }</option>
                        <g:each in="${mainMenus }" var="${mainMenu }">
                        <option value="${mainMenu.name }">${mainMenu.name }</option>                   
                         </g:each>             
                    
                </select>
                <input type="hidden" value="${subMenu.mainM.name }" id="mainmenu${i }" name="mainmenu"/>
                </div>
                <div class="col-3">
					<select class="form-control"  onchange="BtnType(this,0)" id="types0" disabled="disabled">
					     <option value="${subMenu.type}" selected="selected">${subMenu.type}</option>
                         <option value="click">click</option>
                         <option value="view">view</option>
                         <option value="scancode_push">scancode_push</option>
                         <option value="scancode_waitmsg">scancode_waitmsg</option>
                         <option value="pic_photo_or_album">pic_photo_or_album</option>
                         <option value="pic_weixin">pic_weixin</option>
                         <option value="location_select">location_select</option>
                         <option value="media_id">media_id</option>
                         <option value="view_limited">view_limited</option>             
                      </select>
                      <input type="hidden" value="${subMenu.type}" name="type" id="type${i }"/>
				</div>
				<div class="col-6">
				<input type="text" name="key" id="key${i }" value="${subMenu.key }" class="form-control" readonly></div>
				<div class="col-3">
				<a href="#" style ="margin-left:10px"><g:link controller="manage" action="deleteSubMenu" params='[submenuid:"${subMenu.id}"]' >删除</g:link></a>
				<a onclick="editMenu(${i},this)" style ="margin-left:10px">编辑</a>
                </div>
				<div class="clearboth"></div>
				</g:form>
			</li> 
          </g:each>
            <li>
            <g:form id="form-allsub" url="[resource:subMenuInstance,controller:'manage', action:'saveSubMenu']" method="post" class="form-horizontal">                                                         
           <div class="col-2">
           <input type="number" class="form-control"  value="0" min=0 name="position"></div>
		   <div class="col-3"><input type="text" class="form-control" name="name"></div>
		   <div class="col-3">
				<select class="form-control"  onchange="Mainmenu(this,'')">
                    <g:each in="${mainMenus }" var="${mainMenu }">
                        <option value="${mainMenu.name }">${mainMenu.name }</option>                   
                         </g:each>    
                   
                 </select>
           <input type="hidden" value="${mainMenus[0].name }" id="mainmenu" name="mainmenu"/>
           </div>
           <div class="col-3">
			<select class="form-control"  onchange="BtnType(this,'')">
             <option value="click" selected="selected">click</option>
             <option value="view">view</option>
             <option value="scancode_push">scancode_push</option>
             <option value="scancode_waitmsg">scancode_waitmsg</option>
             <option value="pic_photo_or_album">pic_photo_or_album</option>
             <option value="pic_weixin">pic_weixin</option>
             <option value="location_select">location_select</option>
             <option value="media_id">media_id</option>
             <option value="view_limited">view_limited</option>
            </select>
           <input type="hidden" value="click" id="type" name="type"/>
		</div>
		<div class="col-6"><input type="text" class="form-control" name="key"></div>
		<div class="col-3">
		<a onclick="saveAll()">保存</a>
		</div>
		<div class="clearboth"></div>
		</g:form>
	</li> 
   </ul>
   </div>
           </div> 
   </div>
<div class="clearboth"></div>
</section>



	</div>


	<script type="text/javascript">



	function editMenu(i,element){
		document.getElementById("position"+i).readOnly=false;
		document.getElementById("name"+i).readOnly=false;
		document.getElementById("key"+i).readOnly=false;
		document.getElementById("mainmenus"+i).disabled=false;
		document.getElementById("types"+i).disabled= false;
	    var obj = element.parentNode;
	    while(obj.hasChildNodes()) //当div下还存在子节点时 循环继续
	    {
	    	obj.removeChild(obj.firstChild);
	    }
	    var span=document.createElement("span");   
	    span.innerHTML ='<a style ="margin-left:10px"  onclick="EditSave('+i+')">保存</a>'
	    obj.appendChild(span);
	}  

    function EditSave(i){
		if(!checkForm()) return;
    	$("#form-editsub"+i).submit();
    }
	
    function saveAll(){
        if(!checkForm()) return;
    	$("#form-allsub").submit();
	}


	function Mainmenu(data,i){
		$("#mainmenu"+i).val(data.value);
		console.log($("#mainmenu"+i).val())
	}
	function BtnType(data,i){
		
		$("#type"+i).val(data.value);
	}


	function checkForm(){
		var name = $("#name").val();
		
		if(name == ''){
			alert("请填写子菜单名称");
			return false;
		}
		return true;
	}
	</script>


</body>
</html>